<template>
  <!-- 修改用户对话框 -->
  <el-dialog v-model="visible" title="修改工区信息" width="25%">
    <el-form ref="userUpdateForm" :model="userUpdate" label-position="top">
      <el-form-item label="工区名：">
        <el-input v-model="userUpdate.regionName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="所属部门:">
        <el-select v-model="userUpdate.departmentId" placeholder="请选择部门"  style="width: 120px;" clearable>
          <el-option v-for="d in department" :label="d.departmentName" :value="d.id" :key="d.id"></el-option>
        </el-select>
        <!-- <el-input v-model="params.workRegionName" style="width: 120px;" clearable></el-input> -->
      </el-form-item>

      <!-- <el-form-item label="昵称：">
        <el-input v-model="userUpdate.userName" autocomplete="off" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="updateUser">确认修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { put, tip, get } from "@/common";

const visible = ref(false); // 该页面的可见性
// 修改用户对象
const userUpdate = reactive({
  departmentName: '',
  regionName: '',
  status: '',
  id: '',
  departmentId:0,

});

// 该对话框打开并初始化
const open = (user) => {
  console.log(user)
  userUpdate.regionName = user.regionName;
  userUpdate.departmentName = user.departmentName;
  userUpdate.status = user.status;
  userUpdate.id = user.id;
  userUpdate.departmentId = user.departmentId;

  visible.value = true;
};

const userUpdateForm = ref();
// 定义
const emit = defineEmits(["ok"]);
// 修改用户提交
const updateUser = () => {
  userUpdateForm.value.validate(valid => {
    if(valid){
      put('/workregion/updateWorkregion', userUpdate).then(result => {
        emit('ok');
        tip.success(result.message);
        visible.value = false; // 关闭对话框
      });
    }
  });
}

defineExpose({ open });

// 获取部门
const department = ref({})
const getDepartment = () => {
  get("/Department/departmentId-all").then(result => {
    console.log(result)
    department.value = result.data;
  });
}
getDepartment();
</script>
<style scoped>

</style>